<template>
  <div class="home-top-nav">
    <div class="home-top-nav-good">
      <router-link to="/home/selection">精选</router-link>
    </div>
    <div class="home-top-nav-classify">
      <div class="home-top-nav-classify-box">
        <div v-for="item in data" :key="item.id" class="home-top-nav-link-box">
          <router-link :to="item.path">{{ item.data }}</router-link>
        </div>
      </div>
    </div>
    <div class="home-top-nav-wap">
      <van-icon name="wap-nav" color="#fff" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";
import { useStore } from "vuex";
import { IClass } from "./../../store/home/interface";
export default defineComponent({
  setup() {
    const store = useStore();
    const data = computed((): IClass[] => {
      return store.state.home.class;
    });
    return {
      data,
    };
  },
});
</script>
<style lang="stylus" scoped>
.home-top-nav
    display flex
    justify-content center
    width 100%
    font-size .1rem
    overflow hidden
    position sticky
    top 0
    z-index 100
    background red
    .home-top-nav-good
        width .5rem
        display flex
        justify-content center
        height .3rem
        a
            color #fff
            border-bottom .02rem solid #fff
            font-size .14rem
            padding .02rem 0
    .home-top-nav-wap
        width .3rem
        height .3rem
        display flex
        justify-content center
        i
            line-height .3rem
            font-size .2rem
    .home-top-nav-classify
        flex 1
        overflow auto
        &::-webkit-scrollbar{
          display none
        }
        .home-top-nav-classify-box
            overflow hidden
            width 7.6rem
            .home-top-nav-link-box
                float left
                a
                    line-height .3rem
                    padding 0 .08rem
                    font-size .14rem
                    color rgba(255,255,255,.75)
</style>
